(function () {
  let myChart = echarts.init(document.querySelector('.bar'));
  let item = {
    value: 1200, // 值
    tooltip: { extraCssText: 'opacity:0' }, // 额外附加到浮层的 css 样式
    itemStyle: {
      // 图形样式。
      color: '#254065', // 柱条的颜色。
    },
    emphasis: {
      //  鼠标移动上去hover的样式
      itemStyle: {
        // 图形样式。
        color: '#254065', // 柱条的颜色。
      },
    },
  };
  option = {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#00fffb' }, // 0 起始颜色
      { offset: 1, color: '#0061ce' }, // 1 结束颜色
    ]),
    grid: {
      left: '3%', // grid 组件离容器左侧的距离
      right: '4%',
      bottom: '3%',
      top: '4%',
      show: true, // 是否显示直角坐标系网格
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
      borderColor: 'rgba(0, 240, 255, 0.3)', // 外边框颜色
    },
    xAxis: {
      data: [
        '上海',
        '广州',
        '北京',
        '深圳',
        '合肥',
        '',
        '......',
        '',
        '杭州',
        '厦门',
        '济南',
        '成都',
        '重庆',
      ],
      // 坐标轴刻度相关设置。
      axisTick: {
        show: false, // 不显示坐标轴刻度
      },
      // 刻度文字
      axisLabel: {
        color: '#4c9bfd', //刻度文字颜色
      },
    },
    yAxis: {
      axisLabel: {
        // 刻度文字颜色
        color: '#4c9bfd',
      },
      // 坐标轴刻度相关设置。
      axisTick: {
        show: false, // 不显示坐标轴刻度
      },
      splitLine: {
        //  轴线相关设置
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)', // 坐标轴线(分割线)的颜色
        },
      },
    },
    series: [
      {
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240,
        ],
        type: 'bar',
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
})();
